<!--顶部搜索-->
<template>
  <!-- <transition name="bounce"> -->
  <div class="home-seach" :class="seachShow ? 'active' : '' ">
    <div class="seach">
      <div class="seachLeft" @click="jumpHome">
        <!-- <img src="@/assets/logo/logo3.png"> -->
        <img src="@/assets/logo/logo1.jpg">
      </div>

      <div class="seachCenter">
        <div class="seachCenterk">
          <!-- <el-input 
            v-model="seach" 
            placeholder="产品型号/产品名称（用空格分开文字，如导向轴 标准）" 
            @keyup.enter = "jumpSeach(seach)"
            >
          </el-input> -->
          <input 
            :class="{'input-border':myfocus}"
            @focus="myfocus = true"
            @blur="myfocus = false "
            v-model.trim="seach" 
            placeholder="产品型号/产品名称（用空格分开文字，如导向轴 标准）" 
            @keyup.enter = "jumpSeach(seach)"
            />
          <el-button size="small" type="primary" icon="el-icon-search" @click="jumpSeach(seach)">搜 索</el-button>
        </div>
      </div>

      <div class="seachRight">
        <div class="customerService">
          <i class="icon iconfont iconleft">&#xe643;</i>
          <span @click="contentShow = !contentShow">联系方式</span>
          <i class="el-icon-arrow-down iconright" :class="contentShow?'iconactive':''"></i>
          <transition name="el-zoom-in-top" >
            <div class="content" v-show="contentShow" @mouseleave="contentShow = false">
              <div>
                <div class="top">
                  <!-- <div @click="shangqiao($event)">在线沟通</div> -->
                  <img src="@/assets/logo/LOGO3.png" style="margin: 12px auto">
                </div>
                <ul>
                  <li>
                    <i>联系电话 :</i>
                    {{ this.$store.state.contact_info.complaint_call }}
                  </li>
                  <li>
                    <i>邮箱 :</i>
                    {{ this.$store.state.contact_info.email }}
                  </li>
                  <li>
                    <i>技术咨询 :</i>
                    {{ this.$store.state.contact_info.technical_phone }}
                  </li>
                  <li>
                    <i>投诉 :</i>
                    {{ this.$store.state.contact_info.contact_number }}
                  </li>
                </ul>
              </div>
            </div>
          </transition>
        </div>
        <div class="customerService animated" @click="jumpCart" :class=" this.$store.state.flag ? 'bounce' : '' ">
          <i class="icon iconfont iconleft iconpadding">&#xe78e;</i>
          <span class="cart">购物车</span>
          <span class="num">{{ this.$store.state.shopping_num }}</span>

          <div class="triangle_border_down">
            <span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- </transition> -->
</template>
<script>
export default {
  name: "seach",
  data() {
    return {
      myfocus:false,// 获取光标的样式
      seach:null,
      // bounce : false,
      contentShow: 0, //联系客服的显示与隐藏
      seachShow: false
    }
  },

  methods: {
    // 跳转到搜索页面
    jumpSeach(seach) {
      this.$router.push({
        name:'homeSeach',
        params:{
          text: seach
        }
      })
    },

    shangqiao(){
      let nb_invite_ok = document.getElementById("nb_invite_ok")
      if(nb_invite_ok.length > 0) {
        nb_invite_ok.click()
      }
    },

    jumpCart() {
      this.$router.push("/shoppingCart")
    },

    jumpHome() {
      this.scrollinit()
      this.$router.push("/")
    },

    scrollActive() {
      const scrollactivetop = document.documentElement.scrollTop // 滚轮到顶部距离
      const bodyHeight = document.body.clientHeight // 当前页面body的高度
      // console.log(bodyHeight)
      if(bodyHeight > 3000){
        if (scrollactivetop > 1500) {
          // 兼容 页面高度过小而产生的 导航漂浮  bodyHeight > 1800
          this.seachShow = true
        } else {
          this.seachShow = false
        }
      }
      
    },

    scrollinit() {
      document.documentElement.scrollTop = 0
    }
  },
  mounted() {
    document.addEventListener("scroll", this.scrollActive)
    // this.httpinit()
  },

  deactivated() {
    document.removeEventListener("scroll", this.scrollActive)
  }
}
</script>
<style lang="scss" scoped>
.home-seach {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  .seach {
    width: 1200px;
    height: 108px;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .seachLeft {
      cursor: pointer;
      width: 212px;
      height: 108px;
      img {
        width: 100%;
        transition: all 0.2s ease-in;
        &:hover{
          opacity: 0.75;
        }
      }
    }
    .seachCenter {
      .seachCenterk {
        width: 480px;
        display: flex;
        flex-direction: row;
        input{
          flex: 1;
          padding-left: 10px;
          color: #333;
        }
        .input-border{
          border: 1px solid #409EFF;
        }
        /deep/ .el-botton,
        .el-button--small {
          border-radius: 0px;
          font-size: 14px;
        }
        /deep/ .el-input__inner,
        .el-button--small {
          border-radius: 0px;
        }
      }
    }
    .seachRight {
      width: 238px;
      height: 108px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 99;
      cursor: pointer;
      .content {
        cursor:default;
        position: absolute;
        top: 42px;
        left: -139px;
        z-index: 999;
        width: 256px;
        height: 210px;
        border-top: 3px solid #0a83e7;
        background-color: rgba(255, 255, 255, 0.95);
        border-bottom: 1px solid rgb(238, 236, 236);
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        div {
          width: 216px;
          margin: auto;
          .top {
            width: 216px;
            border-bottom: 1px dotted #ababab;
            div {
              width: 104px;
              height: 28px;
              border-radius: 5px;
              background-color: #ff9000;
              line-height: 28px;
              text-align: center;
              margin: 24px 56px;
              font-size: 14px;
            }
          }
          ul {
            color: #1f1f1f;
            li {
              line-height: 24px;
              display: flex;
              flex-direction: row;
              i {
                display: inline-block;
                padding-left: 10px;
                padding-right: 10px;
                width: 68px;
                font-weight: 800;
                text-align: right;
                // text-align:justify;
                // text-justify:inter-ideograph;
              }
              span {
                padding-left: 10px;
              }
            }
            li:first-child {
              margin-top: 15px;
            }
          }
        }
      }
      .customerService {
        width: 117px;
        height: 38px;
        position: relative;
        line-height: 38px;
        border-radius: 5px;
        color: #fff;
        font-size: 14px;
        line-height: 38px;
        text-align: center;
        display: flex;
        flex-direction: row;
        align-items: center;
        background: #409eff;
        // background: linear-gradient(bottom right, #392ba7 , #007ee6); /* 标准的语法（必须放在最后） */
        // &:first-child{
        //     background: linear-gradient(bottom right, #007ee6 , #392ba7); /* 标准的语法（必须放在最后） */
        // }
        &:hover{
          background: #63adf7;
        }
        .iconleft {
          font-size: 25px;
          padding: 0 5px;
        }
        .iconactive {
          transform: rotate(180deg);
          transition: 0.2s;
        }
        .iconright {
          font-size: 12px;
        }
        .iconpadding {
          position: absolute;
          top: -1px;
          left: 3px;
        }

        span {
          padding-right: 5px;
          user-select: none;
        }
        .num {
          position: absolute;
          top: -16px;
          right: 10px;
          height: 18px;
          padding: 0 10px;
          border-radius: 5px;
          background-color: #ff9000;
          line-height: 18px;
        }
        .cart {
          padding-left: 40px;
        }

        /*向下*/
        .triangle_border_down {
          width: 0;
          height: 0;
          border-width: 10px 4px 0;
          border-style: solid;
          border-color: #ff9000 transparent transparent; /*黄 透明 透明 */
          position: absolute;
          top: -1px;
          right: 29px;
          z-index: 0;
          transform: rotate(35deg);
        }
      }
    }
  }
}
.active {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  border-bottom: 1px solid #eeecec;
}
</style>
